<template>
	<div class="video-w">
		<basic-container style="height: calc(100% - 60px)">
			<div class="wrapper">
<!--				<el-alert title="目前支持在局域网下实现快进功能,远程访问是没有快进功能的" type="warning" style="margin-bottom: 10px;"></el-alert>-->
				<div class="wrapper-inner">
					<el-row :gutter="10">
						<el-col :span="4" v-for="(item,index) in data" :key="item.id">
							<div class="container">
								<div class="top">
                                    <iframe
									  :src="formatSrc(item)"
									  width="100%"
									  height="100%"									  
									  allowfullscreen
									>
									</iframe>
								</div>
								<div class="bottom">
									<div class="infoWrap"> 
										<div class="info">设备名称:{{ item.name }}</div>
										<div class="info">所属项目:{{ item.deptName }}</div>										
									</div>
                                    <div class="btn">
                                    	 <el-button size="mini" type="primary" @click="replay(item)">回放</el-button>
                                    </div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<el-dialog
			  title="回放"
			  :visible.sync="dialogVisible"
			  width="45%"
			  :append-to-body="true"
			  :before-close="handleClose">
			  <div>
			    <el-date-picker
			      v-model="dataTime"
			      type="datetimerange"
			      range-separator="至"
			      value-format="yyyyMMddHHmmss"
			      start-placeholder="开始日期"
			      size="small"
			      end-placeholder="结束日期">
			    </el-date-picker>	
			    <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 10px;" @click="search">查询</el-button>
			  </div> 
			  <div class="iframe_wrap">
                    <iframe
                      v-if="showiframe"	
					  :src="iframeSrc"
					  width="100%"
					  height="100%"
					  :id="id"
					  allowfullscreen
					>
					</iframe>			  	
			  </div>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			  </span>
			</el-dialog>		    
		</basic-container>
	</div>
</template>

<script>
	import { getVideoSupervision } from "@/api/dust/videoEquipment";
    import VideoPlayer from "./VideoPlayer";
	export default {
		components: {
            VideoPlayer
		},
		data() {
			return {
				showiframe:false,
				dataTime:null,
				data: [],
				iframeSrc:'',
				videoList:[],
				dialogVisible:false,
				src:'https://open.ys7.com/ezopen/h5/iframe',
				current:null
			}
		},
		create(){
		},
		mounted() {
			this.init()
		},	
		methods: {
			search(){
				if(!this.dataTime){
			        this.$message({
			          showClose: true,
			          message: '请选择时间范围',
			          type: 'error'
			        });	
			        return false
				}
				this.showiframe=true
				this.iframeSrc=this.src+'?url='+this.current.playbackAddress+'?begin='+this.dataTime[0]+'&end='+this.dataTime[1]+
				'&autoplay=1'+'&accessToken='+this.current.accessToken
				
			},
			replay(item){				
				this.dataTime=null
				this.iframeSrc=''
				this.current=item
				this.dialogVisible=true
				this.showiframe=false
			},
			formatSrc(item){
				let str1='https://open.ys7.com/ezopen/h5/iframe?url='
				let str2=item.streamAddress
				let str3='&autoplay=1'
				let str4='&accessToken='+item.accessToken
				return str1+str2+str3+str4
			},
			init() {
				getVideoSupervision().then(res => {
					 this.data=res.data.data	
				})
				// 自己的组件用这个
//				getVideoSupervision().then(res => {
//					console.log(res.data.data)
//					let that=this
//					that.data=res.data.data	
//					let len=res.data.data.length									
//					for(var i=0;i<len;i++){
//						let videoOptions={
//			                autoplay: 'muted', //'muted',//自动播放
//			                controls: true,//用户可以与之交互的控件
//			                loop:false,//视频一结束就重新开始
//			                muted:false,//默认情况下将使所有音频静音
//			                width:'100%',
//			                height:'100%',
//			                sources: [
//			                    {
//			                        src: that.data[i].streamAddress,			                        
//			                    }
//			                ]
//                      }
//						that.data[i].videoOptions=videoOptions						
//					}                    
//				})
			}
		}
	}
</script>
<style>
	.video-w .el-card {
		background: #e5e5e5;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	
	.container {
		height: 260px;
		.top {
			height: 200px;
		}
		.bottom {
			align-items: center;
			display: flex;
			.infoWrap{flex: 1;}
			.btn{padding-right: 5px;}
			height: 60px;
			background: #fff;
			font-size: 14px;
			border-radius: 0 0 5px 5px;
			padding: 5px;
			.info {
				margin-bottom: 8px;
			}
		}
	}
	.iframe_wrap{width: 100%;height: 500px;margin-top: 10px;border:1px solid #ccc}

</style>